<template>
  <div class="problem-list">
    <!-- 问题列表 -->
    <table class="problem-table">
      <thead>
        <tr>
          <th>题目编号</th>
          <th>标题</th>
          <th>状态</th>
          <th>提交</th>
          <th>解决</th>
          <th>通过率</th>
          <th>挑战</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(problem, index) in problems" :key="problem.id">
          <td>{{ problem.id }}</td>
          <td>{{ problem.title }}</td>
          <td>
            <el-tag v-if="problem.isSolved" type="success"> 已解决 </el-tag>
            <el-tag v-else type="danger"> 未解决 </el-tag>
          </td>
          <td>{{ problem.submitNum }}</td>
          <td>{{ problem.acceptNum }}</td>
          <td>
            {{
              problem.submitNum === 0
                ? "0%"
                : ((problem.acceptNum * 100.0) / problem.submitNum).toFixed(2) +
                  "%"
            }}
          </td>

          <td>
            <!-- Add a button to navigate to the challenge page -->
            <router-link :to="'/challenge/' + problem.id">
              <el-button type="primary">挑战</el-button>
            </router-link>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  data() {
    return {
      problems: [],
      userName: "", // 假设从 Vuex 或 session 获取当前用户名
    };
  },
  mounted() {
    // 获取当前用户名
    this.userName = this.$store.state.user?.user?.username; // 从 Vuex 获取用户名

    if (!this.userName) {
      console.error("User not logged in!");
      return;
    }

    // 获取所有题目
    request
      .get("/problem/selectAll")
      .then((res) => {
        // 假设返回的数据是一个题目数组
        const problems = res.data;

        // 使用 Promise.all 等待所有异步请求完成后再更新页面
        const checkStatusPromises = problems.map((problem) => {
          return request
            .get(`/problem/${problem.id}/user/${this.userName}/status`)
            .then((result) => {
              // 假设返回的 result 是状态信息，检查用户是否解决该题目
              if (result.code === "200") {
                problem.isSolved = true; // 用户已解决此题
              } else {
                problem.isSolved = false; // 用户未解决此题
              }
            })
            .catch((error) => {
              problem.isSolved = false; // 如果请求出错，默认用户未解决此题
            });
        });

        // 等待所有的检查状态请求完成
        Promise.all(checkStatusPromises).then(() => {
          this.problems = problems;
        });
      })
      .catch((error) => {
        console.error("Error fetching problems:");
      });
  },
};
</script>

<style scoped>
/* 外层容器 */
.problem-list {
  padding: 20px;
  background-color: #f4f6f9;
  border-radius: 8px;
}

/* 表格样式 */
.problem-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.problem-table th,
.problem-table td {
  padding: 12px 16px;
  text-align: center;
  font-size: 14px;
}

.problem-table th {
  background-color: #f0f2f5;
  color: #333;
  font-weight: 500;
}

.problem-table td {
  border-bottom: 1px solid #f0f2f5;
}

.problem-table tr:hover {
  background-color: #fafafa;
}

/* 分页器样式 */
.pagination {
  margin-top: 20px;
  text-align: center;
}

/* 状态标签样式 */
.el-tag {
  font-size: 12px;
  padding: 4px 8px;
}
</style>
